<script lang="ts">
import defaultCover from '~/assets/imgs/news/blog-banner.png';
import Article from './components/Article.vue';

type TCategory = Api.GetData<typeof apisBlog.apiNewsCategory>;

//  筛选数据
function useNewsCategory() {
  const categoryQry = useQuery({
    queryKey: [apisBlog.apiNewsCategory.id],
    queryFn: () => apisBlog.apiNewsCategory(undefined),
  });
  const categoryActive = ref<number | null>(null);
  const category = computed(() => categoryQry.data.value?.list ?? []);

  const getBindProps = toRef(() => ({
    options: [{ value: null, label: $t('nrjQrift9uO46oB5Yp4yR') }, ...category.value.map(x => ({
      ...x,
      value: x.mid,
      label: x.name,
    }))],
    labelInValue: true,
  }));

  return {
    categoryActive,
    getBindProps,
  };
}

//  列表数据
function useNewsList() {
  const [listQry, listParams] = useFilterInfiniteQuery(apisBlog.apiNewsList, {
    mid: {
      value: undefined,
      responsive: true,
    },
    page_size: {
      value: 11,
    },
  });

  return {
    listQry,
    listParams,
  };
}

// 主要资讯
function useMainNews() {
  const mainQry = useQuery({
    queryKey: [apisBlog.apiNewsMain.id],
    queryFn: () => apisBlog.apiNewsMain(undefined),
  });
  const mainDetail = computed(() => mainQry.data.value);
  return {
    mainDetail,
  };
}
</script>

<script setup lang="ts">
const { listQry, listParams } = useNewsList();
const { mainDetail } = useMainNews();
const { categoryActive, getBindProps } = useNewsCategory();

function selectCategory(e: any) {
  listParams.mid = e.value;
}
</script>

<template>
  <div class="page-content-w flex flex-col gap-7.5">
    <div class="head flex-between">
      <p class="flex-1">
        News
      </p>
      <TAntdTheme component="Select" theme="light">
        <ASelect v-model:value="categoryActive" :virtual="false" class="min-w-37.5" v-bind="getBindProps" @change="selectCategory" />
      </TAntdTheme>
    </div>
    <RouterLink v-if="listQry.data.value?.pages[0].list.length > 0" :to="{ name: RN.NEWS_DETAIL, query: { news_id: mainDetail?.news_id } }" class="flex-between flex-wrap gap-20 lt-tabletl:gap-10">
      <div class="min-w-360px flex-1 overflow-hidden rounded-lg">
        <img :src="!!mainDetail?.covers ? mainDetail?.covers : defaultCover" class="h-full w-full object-cover">
      </div>
      <div class="min-w-360px flex flex-1 flex-col items-start gap-4 text-sys-text-body">
        <div class="flex-between self-stretch" :class="{ 'justify-end': !mainDetail?.category?.[0]?.name }">
          <span v-if="mainDetail?.category?.[0]?.name" class="block rounded-lg bg-sys-layer-d px-4 py-3">
            {{ mainDetail?.category?.[0]?.name }}
          </span>
          <span class="">
            {{ $d(mainDetail?.create_time ?? 1725506751020) }}
          </span>
        </div>
        <p class="text-8.5 text-sys-text-head font-normal lt-tablet:text-4.5">
          {{ mainDetail?.title }}
        </p>
        <p>
          {{ mainDetail?.summary }}
        </p>
        <AButton type="primary" class="ant-cover__Button-3d-primary mt-9">
          {{ $t('ztIyzGcpEeSsXGdqRkSxd') }}
        </AButton>
      </div>
    </RouterLink>
    <!-- todo 日后会修改成无限加载组件 -->
    <div class="list grid mt-50px gap-7.5 lt-tabletl:mt-24px">
      <TInfiniteQuery class="col-span-full mt-3" :querier="listQry">
        <template #default="{ item }">
          <Article :detail="item" />
        </template>
      </TInfiniteQuery>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list {
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
</style>
